<template>
	<view class="travel-record-item flex--row">
		<view class="record-bar">
			<view class="record-score" :style="{height:travelScore*10+'%'}">
			</view>
		</view>
		<view class="record-content flex--row">
			<view class="record-content-info flex--col">
				<view class="info-route flex--col">
					<text class="text--main-dark">{{travel.routeName}}</text>
					<text class="record-tag text--thirdary-dark--heavy">{{travel.category}}</text>
				</view>
				<text class="text--thirdary-dark">{{travel.date}}</text>
			</view>
			<view class="record-content-index flex--col">
				<view class="index-item flex--row">
					<image aria-label="出行时长" src="@/static/chux/clock.svg" class="icon--middle"></image>
					<text class="text--thirdary-dark">{{travel.hour}}h{{travel.minute}}min</text>
				</view>
				<view class="index-item flex--row">
					<image aria-label="对方对你的出行评分" :src="travel.avatar" class="icon--middle avatar"></image>
					<view class="flex--col text--thirdary-dark">
						<text>{{travel.name}}</text>
						<text>{{travelScore}}分</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:['travel'],
		computed:{
			travelScore(){
				if(this.travel.score){
					return this.travel.score.toFixed(2)
				}
				return 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 22px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark--heavy{
		font-size: 18px;
		font-weight: 700;
		color:#333;
	}
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 500;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		color:#666;
	}
	
	.text--thirdary-dark--heavy{
		font-size: 16px;
		color:#666;
		font-weight: 700;
	}
	
	.travel-record-item{
		gap:12px;
		width:100%;
		justify-content: space-between;
		.record-content{
			width:90%;
			gap:6px;
			justify-content: space-between;
			&-info,&-index{
				gap:24px;
			}
			
			text{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		
		.record-content-info{
			flex:2;
			align-items: flex-start;
			max-width:60%;
			.info-route{
				width:100%;
			}
		}
		
		.record-content-index{
			flex:1;
			width:40%;
			.index-item{
				gap:4px;
				align-items: center
			}
			
		}
	}
	
	.record-bar{
		@include border-three-roundings
		width: 48rpx;
		position:relative;
		overflow:hidden;
		
		.record-score{
			position:absolute;
			bottom:0;
			left:0;
			width:100%;
			background:$main-color;
		}
	}
	
	.record-tag{
		color:$main-color--dark;
		margin-top:4px;
		padding:4px 6px;
		border-radius: 10px;
		background-color: rgba($main-color,0.4);
		text-align: center;
	}
	
	
	
</style>